<template>
	<div>
		<el-dialog title="商品列表" center v-model="dialogTableVisible1" width="1200px" append-to-body @close="close">
			<div>
				<div class="bgWhite radius8 pb30 ">
					<div class="radius8" style="margin: 20px;">
						<!-- 	<div class="border-bottom pl30 pt20 pb20 flex col-center">
								<div class="plr20 cursor relative" :class="{'active main-color':tid == item.value}"
									v-for="(item,index) in bus_product_type" :key="index" @click="tabPanel(item)">
									{{item.label}}
								</div>
							</div> -->
						<div class="flex col-top row-between  p20">
							<!-- <div class="bgWhite radius8" style="width: 280px;padding: 20px;">
									<div>商品类别</div>
									<div class="mt15">
										<el-tree :data="data" node-key="id" default-expand-all
											:expand-on-click-node="false" @node-click="handleNodeClick">
											<template #default="{ node, data }">
												<div class="custom-tree-node flex col-center row-between">
													<span>{{ node.label }}</span>
												</div>
											</template>
										</el-tree>
									</div>
								</div> -->
							<div style="width: 100%">
								<div class="flex col-center row-between mb20">
									<div>
										<!-- 已选择<span class="main-color">{{ids.length}}</span>个商品 -->
									</div>
									<div class="flex col-center">
										<span class="fs14 mr10">商品名称/编号</span>
										<el-input v-model="queryParams.keyword" placeholder="请输入" clearable
											class="resetInput" style="width: 200px;margin-right: 15px;"
											@keyup.enter="handleQuery" />
										<el-button type="defaultBtn" @click="handleQuery">搜索
										</el-button>
									</div>
								</div>
								<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
								background: '#FAFAFA',
								color: '#0C1019',
								height: '54px',
							  }" :cell-style="{ height: '54px' }" highlight-current-row @current-change="handleCurrentChange">
									<el-table-column label="选择" type="index" align="center" width="80">
										<template v-slot="scope">
											<el-radio v-model="radio" :label="scope.row.id">{{''}}</el-radio>
										</template>
									</el-table-column>
									<!-- <el-table-column type="index" width="55" align="center"
											:selectable="isSelect" /> -->
									<el-table-column label="主键" align="center" prop="id" v-if="false" />
									<!-- <el-table-column label="商品图片" align="center" prop="mainImageUrl" width="120">
											<template #default="scope">
												<img :src="scope.row.mainImageUrl" style="width: 100px; height: 100px" />
											</template>
										</el-table-column> -->
									<el-table-column label="商品名称" align="center" prop="commodityName" />
									<el-table-column label="商品编号" align="center" prop="commodityNumber" width="150" />
									<el-table-column label="标准单价" align="center" prop="caseUnitPrice" />
									<el-table-column label="产品规格" align="center" prop="caseQuantity" />
									<!-- <el-table-column label="启用状态" align="center" prop="status">
										<template v-slot="scope">
											<el-switch disabled v-model="scope.row.status" class="ml-2" inline-prompt
												active-text="启用" inactive-text="禁用" :loading="loading" />
										</template>
									</el-table-column> -->
									<el-table-column label="备注信息" align="center" prop="remark" />
								</el-table>

								<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
								v-model:limit="queryParams.pageSize" @pagination="getList" />
								<div class="text-right mt30">
									<el-button class="cancelSubBtn" @click="dialogTableVisible1 = false">取 消</el-button>
									<el-button type="primary" @click="goodsSubmit" class="mainSubBtn">确 定</el-button>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 编辑/新增分类树弹窗 -->
				<el-dialog :title="title" center v-model="treeFormOpen" width="385px" append-to-body>
					<el-form ref="refTreeForm" :model="form" :rules="rules" label-width="80px">
						<el-form-item label="名称:" prop="name">
							<el-input size="large" v-model="form.name" placeholder="请输入" style="200px" />
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer text-right mt30">
						<el-button class="cancelSubBtn" @click="treeFormOpen = false">取 消</el-button>
						<el-button type="primary" @click="treeDataSubmit" class="mainSubBtn">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		listClassify1, //商品分类树
		listGoods, //列表
	} from "@/api/business/product";
	export default {
		data() {
			return {
				bus_product_type: this.useDict('bus_product_type').bus_product_type,
				dialogTableVisible1: false,
				tid: 1001,
				loading: true, // 遮罩层
				ids: [], // 选中数组
				single: true, // 非单个禁用
				multiple: true, // 非多个禁用
				showSearch: true, //显示搜索条件
				total: 0, // 总条数
				list: [], // 产品表格数据
				title: '', // 弹出层标题
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyword: '', // 产品名称 品牌名称 产品编码
					commodityType: '', //产品类型
					status:0//是否启用
				}, //查询参数
				data: [], //分类树数据
				title: '新增', // 弹出层标题
				treeFormOpen: false, //新增弹窗
				rules: {
					name: [{
						required: true,
						message: "请输入类别名称",
						trigger: "blur"
					}],
				},
				form: {
					name: '',
					parentId: '', //父id
					ancestors: '', //id链
					level: '', //层级
					id: ''
				},
				radio: '',
				selectGoods: '', //选中的商品
			}
		},
		created() {
			this.getTree(1)
		},
		methods: {
			open(){
				this.dialogTableVisible1 = true
			},
			close(){
				this.dialogTableVisible1 = false
			},
			handleCurrentChange(val) {
				console.log(val)
				if(val){
					this.radio = val.id
					this.selectGoods = val
				}
			},
			// 提交
			goodsSubmit() {
				this.$emit('goodsVal', this.selectGoods)
			},
			isSelect(row, index) {
				if (row.status == true) {
					return true;
				}
			},
			handleNodeClick(e) {
				if (e.id * 1 != -1) {
					this.queryParams.classifyId = e.id
				} else {
					this.queryParams.classifyId = ''
				}
				this.getList();
			},
			resetAdd() {
				this.reset()
				this.treeFormOpen = true
			},
			reset() {
				this.form = {
					name: '',
					parentId: '', //父id
					ancestors: '', //id链
					level: '', //层级
					id: ''
				}
			},
			//分类树
			getTree(num) {
				listClassify1().then(res => {
					if (res.code == 200) {
						let arr = [{
							ancestors: '',
							id: '-1',
							name: '全部',
							parentId: ''
						}]
						let dataArr = arr.concat(res.data)
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.data = this.handleTree(dataArr)
						console.log(dataArr, 'this.data1')
						console.log(this.data, 'this.data')
						if (num == 1) {
							this.getList()
						}
					}
				})
			},
			// 分类树新增
			treeDataSubmit() {
				console.log(this.form, 'form')
				addTree(this.form).then(res => {
					if (res.code == 200) {
						this.treeFormOpen = false
						this.getTree()
					}
				})
			},
			//查询商品列表
			getList() {
				this.loading = true;
				listGoods(this.queryParams).then((response) => {
					this.list = response.rows;
					for (let key in this.list) {
						this.list[key].status = this.list[key].status == '0' ? true : false
					}
					this.total = response.total;
					this.loading = false;
				});
			},
			// 点击tab
			tabPanel(item) {
				this.tid = item.value
				this.queryParams.commodityType = this.tid
				this.queryParams.pageNum = 1
				this.getList()
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.selectList = selection
				console.log(this.selectList, 'seleclist')
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
		}
	}
</script>

<style>
	.active::after {
		content: '';
		position: absolute;
		width: 32px;
		height: 2px;
		opacity: 1;
		background: rgba(77, 172, 177, 1);
		left: 28px;
		bottom: -20px;
	}

	.custom-tree-node {
		flex: 1;
	}
</style>